<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
-->
<!-- 
* @desc:用户管理搜索组件
* @fileName:UserSearch.vue
* @author:chenxiaofeng@yzbdl.ac.cn
* @date:2022-4-7
!-->
<script setup lang="ts">
import { ref } from "vue";
import { Search, Plus } from "@element-plus/icons-vue";

const props = defineProps({
  // 查询方法
  searchFunc: Function as any,
  // 查询按钮动画
  isSearchLoading: {
    type: Boolean,
    default: false,
  },
  //弹窗显示方法
  dialogControlFunc: Function as any,
});

// 定义拆线呢用户账号
const userValue = ref("");
// 定义查询昵称
const nickValue = ref("");

/**
 * 查询方法
 * @reture viod
 */
const onSerarch = () => {
  let serachData = {
    userValue: userValue.value,
    nickValue: nickValue.value,
  };
  props.searchFunc(serachData);
};

/**
 * 新增方法
 * @reture viod
 */
const onAdd = () => {
  props.dialogControlFunc("新增");
};
</script>

<template>
  <div class="page-search">
    <!-- 列表文字 -->
    <div class="page-title-words">用户管理</div>
    <!-- 用户账号查询 -->
    <el-input
      class="page-search-userInput"
      v-model="userValue"
      clearable
      :suffix-icon="Search"
      @clear="onSerarch"
      @keyup.enter.native="onSerarch"
      placeholder="请输入用户账号"
    ></el-input>
    <!-- 昵称查询 -->
    <el-input
      class="page-search-userInput"
      clearable
      :suffix-icon="Search"
      @clear="onSerarch"
      @keyup.enter.native="onSerarch"
      v-model="nickValue"
      placeholder="请输入用户昵称"
    ></el-input>
    <!-- 查询按钮 -->
    <el-button @click="onAdd" :icon="Plus">新增</el-button>
  </div>
</template>

<style scoped lang="scss">
.page-search {
  display: flex;
  justify-content: flex-end;
  :deep(.el-input__wrapper) {
    height: 30px;
    border-radius: 0;
    background-color: #f2f2f6 !important;
    box-shadow: unset !important;
  }
  .page-search-userInput {
    width: 150px;
    margin-right: 10px;
  }
  .page-title-words {
    font-size: 16px;
    color: #000;
    flex: 1;
  }
  .el-button {
    width: 70px;
    height: 30px;
    border-radius: 0;
    background-color: #f2f2f6;
    color: #000;
    border: 0;
    &:hover {
      background-color: #5473e6;
      color: #fff;
    }
  }
}
</style>
